<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;}
#rili{float: left;border: 1px solid black;
width: 280px;}
#n{
	width: 100%;height: 20px;
	line-height: 20px;text-align: center;
}
.pr{float: left;cursor: pointer;}
.nt{float: right;cursor: pointer;}
#l{
	width: 100%;height: 20px;line-height: 20px;float: left;
}
#l span{float: left;width: 40px;height: 100%;text-align: center;line-height: 20px;}


    </style>
</head>
<body>

<div id='rili'>
	<div id='n'><span class='pr'>prev</span>2016年9月30日<span class='nt'>next</span></div>
	<div id='l'>
		<span>一</span>
		<span>二</span>
		<span>三</span>
		<span>四</span>
		<span>五</span>
		<span style='color:red'>六</span>
		<span style='color:red'>日</span>
	</div>
	<ul id='all'>
	</ul>
</div>
<script type="text/javascript">
	
	var innerHtml = [
		"<div id='rili'>",
			"<div id='n'><span class='pr'>prev</span>2016年9月30日<span class='nt'>next</span></div>",
			"<div id='l'>",
				"<span>一</span>",
				"<span>二</span>",
				"<span>三</span>",
				"<span>四</span>",
				"<span>五</span>",
				"<span style='color:red'>六</span>",
				"<span style='color:red'>日</span>",
			"</div>",
			"<ul id='all'>",
			"</ul>",
		"</div>"
	].join('');

	alert(innerHtml);

</script>
</body>
</html>